/**
 * @description 椅子数计算器样式实现
 * @author jiangxiaobo
 */
*{
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}
html {
  font-size: 20px;
}
html,body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  background-color: #072F49;
}

.row {
    margin: 0;
    overflow: hidden;
  }
  .row:after,.row:before {
    content: ' ';
    display: block;
    clear: both;
  }
  .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-5 {
    position: relative;
    float: left;
  }
  .col-xs-12 {
    width: 100%;
    position: relative;
  }
  .col-xs-11 {
    width: 91.66666667%;
  }
  .col-xs-10 {
    width: 83.33333333%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-8 {
    width: 66.66666667%;
  }
  .col-xs-7 {
    width: 58.33333333%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-5 {
    width: 41.66666667%;
  }
  .col-xs-4 {
    width: 33.33333333%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-2 {
    width: 16.66666667%;
  }
  .col-xs-1 {
    width: 8.33333333%;
  }
  .col-5 {
    width: 20%;
  }

.yz_body {
  position: relative;
  width: 19rem;
  height: 24rem;
  top: 50%;
  left: 50%;
  margin: -12rem 0 0 -9.5rem;
  background-color: #46617D;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.6rem 0 #6688AA, 0 0.4rem 0.15rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.6rem 0 #6688AA, 0 0.4rem 0.15rem rgba(0, 0, 0, 0.2);
}
.yz_app {
  position: absolute;
  width: 18rem;
  height: 23rem;
  top: 0.5rem;
  left: 0.5rem;
  background-color: #2D3E50;
  border-radius: 0.5rem;
  z-index: 0;
}
.yz_app .yz_result {
  width: 16rem;
  height: 9rem;
  margin: 1rem;
  padding: 0.5rem;
  text-align: right;
  font-size: 1.5rem;
  word-break: break-all;
  color: white;
  background-color: #62A884;
  border-radius: 0.5rem;
  border: 1px solid black;
  overflow: auto;
  -webkit-box-shadow: 0.05rem 0.05rem 0.1rem 0.3rem rgba(0,0,0,0.3) inset,0.05rem 0.05rem 0.1rem 0.1rem rgba(0,0,0,0.3),-0.05rem -0.05rem 0.1rem 0.1rem rgba(0,0,0,0.3);
          box-shadow: 0.05rem 0.05rem 0.1rem 0.3rem rgba(0,0,0,0.3) inset,0.05rem 0.05rem 0.1rem 0.1rem rgba(0,0,0,0.3),-0.05rem -0.05rem 0.1rem 0.1rem rgba(0,0,0,0.3);
}
.yz_app .yz_option {
  width: 16rem;
  height: 11rem;
  margin: 0 1rem 1rem;
}
.yz_app .yz_option [class*=col-xs-]{
  padding-bottom: 1rem;
  -moz-user-select:none;/*火狐*/
  -webkit-user-select:none;/*webkit浏览器*/
  -ms-user-select:none;/*IE10*/
  -khtml-user-select:none;/*早期浏览器*/
  user-select:none;
}

/**
 * vue hack
 */
[v-cloak]{
  display: none;
}
/*
* Base Button Style
*/
.button {
  color: #666;
  background-color: #EEE;
  border-color: #EEE;
  font-weight: 300;
  font-size: 16px;
  font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  height: 40px;
  padding: 0 40px;
  margin: 0;
  display: inline-block;
  appearance: none;
  cursor: pointer;
  border: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: .3s;
          transition-duration: .3s; }

  .button:visited {
    color: #666; }
  .button:hover, .button:focus {
    background-color: #f6f6f6;
    text-decoration: none;
    outline: none; }
  .button:active, .button.active, .button.is-active {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    text-decoration: none;
    background-color: #eeeeee;
    border-color: #cfcfcf;
    color: #d4d4d4;
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); }
  .button.disabled, .button.is-disabled, .button:disabled {
    top: 0 !important;
    background: #EEE !important;
    border: 1px solid #DDD !important;
    text-shadow: 0 1px 1px white !important;
    color: #CCC !important;
    cursor: default !important;
    appearance: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    opacity: .8 !important; }

/*
* Base Button Tyography
*
*/
.button-uppercase {
  text-transform: uppercase; }

.button-lowercase {
  text-transform: lowercase; }

.button-capitalize {
  text-transform: capitalize; }

.button-small-caps {
  font-variant: small-caps; }

.button-icon-txt-large {
  font-size: 36px !important; }

/*
* Base padding
*
*/
.button-width-small {
  padding: 0 10px !important; }

/*
* Base Colors
*/
.button-primary,
.button-primary-flat {
  background-color: #1B9AF7;
  border-color: #1B9AF7;
  color: #FFF; }
  .button-primary:visited,
  .button-primary-flat:visited {
    color: #FFF; }
  .button-primary:hover, .button-primary:focus,
  .button-primary-flat:hover,
  .button-primary-flat:focus {
    background-color: #4cb0f9;
    border-color: #4cb0f9;
    color: #FFF; }
  .button-primary:active, .button-primary.active, .button-primary.is-active,
  .button-primary-flat:active,
  .button-primary-flat.active,
  .button-primary-flat.is-active {
    background-color: #2798eb;
    border-color: #2798eb;
    color: #0880d7; }
.button-action,
.button-action-flat {
  background-color: #A5DE37;
  border-color: #A5DE37;
  color: #FFF; }
  .button-action:visited,
  .button-action-flat:visited {
    color: #FFF; }
  .button-action:hover, .button-action:focus,
  .button-action-flat:hover,
  .button-action-flat:focus {
    background-color: #b9e563;
    border-color: #b9e563;
    color: #FFF; }
  .button-action:active, .button-action.active, .button-action.is-active,
  .button-action-flat:active,
  .button-action-flat.active,
  .button-action-flat.is-active {
    background-color: #a1d243;
    border-color: #a1d243;
    color: #8bc220; }
.button-numberbg {
  background-color: #7B99B7;
  border-color: #7B99B7;
  color: #FFF; }
  .button-numberbg:visited {
    color: #FFF; }
  .button-numberbg:hover, .button-numberbg:focus {
    background-color: #96B6D6;
    border-color: #96B6D6;
    color: #FFF; }
  .button-numberbg:active, .button-numberbg.active, .button-numberbg.is-active {
    background-color: #8FBAE4;
    border-color: #8FBAE4;
    color: #7B99B7; }
.button-multiplybg {
  background-color: #1B9AF7;
  border-color: #1B9AF7;
  color: #FFF; }
  .button-multiplybg:visited {
    color: #FFF; }
  .button-multiplybg:hover, .button-multiplybg:focus {
    background-color: #4cb0f9;
    border-color: #4cb0f9;
    color: #FFF; }
  .button-multiplybg:active, .button-multiplybg.active, .button-multiplybg.is-active {
    background-color: #2798eb;
    border-color: #2798eb;
    color: #0880d7; }

/*
* Base Layout Styles
*/
.button-block,
.button-stacked {
  display: block; }

/*
* Button Types (optional)
*/
.button-square {
  border-radius: 0; }

.button-box {
  border-radius: 10px; }

.button-rounded {
  border-radius: 4px; }

.button-pill {
  border-radius: 200px; }

.button-circle {
  border-radius: 100%; }

/*
* Size Adjustment for equal height & widht buttons
*/
.button-circle,
.button-box,
.button-square {
  padding: 0 !important;
  width: 40px; }
  .button-circle.button-giant,
  .button-box.button-giant,
  .button-square.button-giant {
    width: 70px; }
  .button-circle.button-jumbo,
  .button-box.button-jumbo,
  .button-square.button-jumbo {
    width: 60px; }
  .button-circle.button-large,
  .button-box.button-large,
  .button-square.button-large {
    width: 50px; }
  .button-circle.button-normal,
  .button-box.button-normal,
  .button-square.button-normal {
    width: 40px; }
  .button-circle.button-small,
  .button-box.button-small,
  .button-square.button-small {
    width: 30px; }
  .button-circle.button-tiny,
  .button-box.button-tiny,
  .button-square.button-tiny {
    width: 24px; }

/*
* 3D Buttons
*/
.button-3d {
  position: relative;
  top: 0;
  -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); }
  .button-3d:hover, .button-3d:focus {
    -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); }
  .button-3d:active, .button-3d.active, .button-3d.is-active {
    top: 5px;
    -webkit-transition-property: all;
            transition-property: all;
    -webkit-transition-duration: .15s;
            transition-duration: .15s;
    -webkit-box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); }

/*
* 3D Button Colors
*/
.button-3d.button-primary {
  -webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); }
  .button-3d.button-primary:hover, .button-3d.button-primary:focus {
    -webkit-box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3);
            box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); }
  .button-3d.button-primary:active, .button-3d.button-primary.active, .button-3d.button-primary.is-active {
    -webkit-box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); }
.button-3d.button-numberbg {
  -webkit-box-shadow: 0 7px 0 #576F86, 0 8px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 7px 0 #576F86, 0 8px 3px rgba(0, 0, 0, 0.3); }
  .button-3d.button-numberbg:hover, .button-3d.button-numberbg:focus {
    -webkit-box-shadow: 0 7px 0 #576F86, 0 8px 3px rgba(0, 0, 0, 0.3);
            box-shadow: 0 7px 0 #576F86, 0 8px 3px rgba(0, 0, 0, 0.3); }
  .button-3d.button-numberbg:active, .button-3d.button-numberbg.active, .button-3d.button-numberbg.is-active {
    -webkit-box-shadow: 0 2px 0 #212D38, 0 3px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 0 #212D38, 0 3px 3px rgba(0, 0, 0, 0.2); }
.button-3d.button-multiplybg {
  -webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); }
  .button-3d.button-multiplybg:hover, .button-3d.button-multiplybg:focus {
    -webkit-box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3);
            box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); }
  .button-3d.button-multiplybg:active, .button-3d.button-multiplybg.active, .button-3d.button-multiplybg.is-active {
    -webkit-box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); }
.button-3d.button-action {
  -webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); }
  .button-3d.button-action:hover, .button-3d.button-action:focus {
    -webkit-box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
            box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); }
  .button-3d.button-action:active, .button-3d.button-action.active, .button-3d.button-action.is-active {
    -webkit-box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); }
/*
* Button Sizes
*/
.button-giant {
  font-size: 28px;
  height: 70px;
  line-height: 70px;
  padding: 0 70px; }

.button-jumbo {
  font-size: 24px;
  height: 60px;
  line-height: 60px;
  padding: 0 60px; }

.button-large {
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  padding: 0 50px; }

.button-normal {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  padding: 0 40px; }

.button-small {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 30px; }

.button-tiny {
  font-size: 9.6px;
  height: 24px;
  line-height: 24px;
  padding: 0 24px; }
